import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '@/components/home/header'
import backgroundUrl from '@/assets/images/background.png'
import { Steps } from 'antd-mobile'
import BaseInfo from './baseInfo'
import Cuttent from './current'
import Complete from './complete'
import { useAppSelector, useAppDispatch } from '@/store'
import {
  initProvince,
  setSubjectByProvince,
  setCurrentSubjectByProvinceParram,
  setDiagnosisParam,
  setLocalstorage,
} from '@/store/fillLink'
import { getProvinceList, getSubjectByProvince, diagnosis } from '@/api/fillLink'
import { useAsyncEffect } from 'ahooks'
import { Button } from '@dandelion/mobile'
const { Step } = Steps
const base: FC<{}> = () => {
  const [current, setCurrent] = useState(0)
  const dispatch = useAppDispatch() //
  const navigate = useNavigate() //
  useAsyncEffect(async () => {
    const res = await getProvinceList()
    dispatch(initProvince(res.data))
  }, [])
  return (
    <div
      className="w-full bg-white h-full"
      style={{
        backgroundImage: `url(${backgroundUrl})`,
        backgroundSize: '100% 100%',
        height: '100vh',
      }}
    >
      <Header
        cb={() => {
          if (current === 0) {
            navigate(-1)
          } else {
            setCurrent(current - 1)
          }
        }}
        headerText={'学业诊断'}
      ></Header>
      <div className=" p-r1.2">
        <Steps
          current={current}
          className=" font-medium-family font-medium"
          style={{
            '--title-font-size': '13px',
            '--adm-color-primary': '#FF3627',
            '--description-font-size': '15px',
            '--indicator-margin-right': '15px',
          }}
        >
          <Step
            title="基本信息"
            style={{
              background: 'transparent',
              '--adm-color-weak': '#999999',
              '--adm-color-background': 'transparent',
            }}
            description=""
            icon={<i className="w-r2.0 h-r2.0 iconfont icon-quanquan rounded-xl bg-white"></i>}
          />
          <Step
            title="当前成绩"
            style={{
              background: 'transparent',
              '--adm-color-weak': '#999999',
              '--adm-color-background': 'transparent',
            }}
            description=""
            icon={<i className="w-r2.0 h-r2.0 iconfont icon-quanquan  rounded-xl bg-white"></i>}
          />
          <Step
            title="生成报告"
            style={{
              background: 'transparent',
              '--adm-color-weak': '#999999',
              '--adm-color-background': 'transparent',
            }}
            description=""
            icon={<i className="w-r2.0 h-r2.0 iconfont icon-quanquan  rounded-xl bg-white"></i>}
          />
        </Steps>
        {current === 0 ? <BaseInfo setCurrent={setCurrent}></BaseInfo> : null}
        {current === 1 ? <Cuttent setCurrent={setCurrent}></Cuttent> : null}
        {current === 2 ? <Complete setCurrent={setCurrent}></Complete> : null}
      </div>
    </div>
  )
}

export default base
